/*
 *进度条组件
 *调用例子
 *
 *<div className="TestProcessBar">
 <ReProcessBar reClass="ReProcessBar_Font" process="80"></ReProcessBar>
 </div>
 *
 * process:进度百分比
 * isShowText:是否显示文字
 *文字大小根据上层元素大小改变
 *
 * */

'use strict';
var React = require('react');
class ReProcessBar extends React.Component {
    constructor(props) {
        super(props);
        this.renderProcess = this.renderProcess.bind(this);
        this.getMainClass=this.getMainClass.bind(this);
    }

    //渲染进度条
    renderProcess() {
        if (this.props.process == undefined) {
            return <div className="ReprocessBar_process"></div>
        }

        return <div ref="ReprocessBar_Animation" className="ReprocessBar_process">
            <div className="ReprocessBar_ProcessText">
                <span>&nbsp;{this.props.isShowText&&this.props.process != undefined ? this.props.process : ''}</span><span>{this.props.isShowText&&this.props.process.indexOf('%')<0?'%':''}</span>
            </div>
        </div>
    }

    //利用reClass附加样式
    getMainClass(){
        if(this.props.reClass!=undefined){
            return "ReProcessBar_Container "+this.props.reClass;
        }
        else{
            return 'ReProcessBar_Container';
        }
    }


    //此处在客户端渲染后执行，改变进度条加载动画
    componentDidMount() {
        var item = this.refs.ReprocessBar_Animation;
        var process = this.props.process != undefined ? this.props.process : 0;
        if(process.indexOf('%')<0) {
            item.style.width = process + '%';
        }
        else{
            item.style.width = process;
        }
    }



    render() {
        return (
            <div className={this.getMainClass()}>
                {this.renderProcess()}
            </div>
        );
    }
}

module.exports = ReProcessBar;